<template>
    <div class="shop">
        <div class="dev-width" style="margin:60px auto 0">
            <a class="store-logo">
                <img v-if="shop.hasOwnProperty('shopLogoUrl')" :src="absUrl(shop.shopLogoUrl)" />
                <img v-else src="../../../assets/images/default/dp_logo.png">
            </a>
            <div class="store-name">
                <h3>{{shop.name}}</h3>
                <div v-if="shop.userType==='1'" class="store-valid geren">
                    <i class="iconfont icon-geren"></i>个人店铺
                </div>
                <div v-else-if="shop.userType==='2'" class="store-valid qiye">
                    <i class="iconfont icon-qiye2"></i>企业店铺
                </div>
            </div>
            <div class="store-search">
                <input type="text" v-model="page.keyWord" placeholder="请输入搜索关键字" />
                <a class="all-btn" @click="searchSite">搜全网</a>
                <a class="store-btn" @click="getGoodsPageListByShopId">搜本店</a>
            </div>
        </div>
        <div class="store-menu">
            <ul>
                <li>
                    <a @click="goToShop">首页</a>
                </li>
                <li class="active">
                    <a>全部商品</a>
                </li>
            </ul>
        </div>
        <div v-if="searchTip !== ''" style="width: 990px;margin: 20px auto 0">
            <span style="color: #666666;font-size: 12px;line-height: 24px;">搜索&nbsp;&nbsp;
                <a style="color:#4285F4">“{{searchTip}}”</a>&nbsp;&nbsp;共&nbsp;&nbsp;
                <a style="color: #FB9109">{{page.totals}}</a>&nbsp;&nbsp;个结果</span>
        </div>
        <div class="list-con" style="width: 990px;margin: 20px auto">
            <div class="list-main">
                <div class="list-header">
                    <ul>
                        <li :class="selectOrder==0?'active':''" @click="orderBy('hits','desc',0)">综合
                            <i class="iconfont"></i>
                        </li>
                        <li :class="selectOrder==1?'active':''">
                            <span v-if="!showPriceArray" @click="orderBy('price','asc',1)">价格
                                <i class="iconfont icon-zhcc_xiangxiajiantou"></i>
                            </span>
                            <span v-else @click="orderBy('price','desc',1)">价格
                                <i class="iconfont icon-zhcc_xiangshangjiantou"></i>
                            </span>
                        </li>
                        <li :class="selectOrder==2?'active':''">
                            <span v-if="!showPublishTimeArray" @click="orderBy('publishTime','asc',2)">发布时间
                                <i class="iconfont icon-zhcc_xiangxiajiantou"></i>
                            </span>
                            <span v-else @click="orderBy('publishTime','desc',2)">发布时间
                                <i class="iconfont icon-zhcc_xiangshangjiantou"></i>
                            </span>
                        </li>
                    </ul>
                    <div class="list-page" v-if="page.totals>0">
                        <simplePager :total="page.totals" :rows="page.rows" :current="page.page" @change="change"></simplePager>
                    </div>
                </div>
                <div class="list-box" v-for="(item,index) in searchList" :key="index">
                    <nuxt-link class="list-img" :to="{path:'/goods',query:{id:item.goodsId}}">
                        <img v-if="!item.hasOwnProperty('url')" src="~/assets/images/no-img.png" />
                        <img v-else :src="absUrl(item.url)">
                    </nuxt-link>
                    <div class="list-txt">
                        <nuxt-link :to="{path:'/goods',query:{id:item.goodsId}}">
                            <h3>{{item.name}}</h3>
                        </nuxt-link>
                        <div class="list-msg">
                            <h4>专利号（申请号）：{{item.applyNo}}</h4>
                            <span v-if="item.hasOwnProperty('hits')">{{item.hits}}人浏览</span>
                            <!-- <span>{{item.time}}</span> -->
                            <span>{{item.hits}}人浏览</span>
                            <span>{{item.publishTime|formatDate('yyyy-MM-dd')}}</span>
                        </div>
                        <ul class="list-tip">
                            <li>
                                <label>高新技术领域</label>{{gethighTechFields(item.highTechField)}}
                            </li>
                            <li v-if="item.type === '01'">
                                <label>专利类型</label>{{filterChildType(item.childType)}}
                            </li>
                            <li v-else-if="item.type === '02'">
                                <label>技术成果类型</label>{{ filterChildType(item.childType)}}
                            </li>
                            <li v-if="item.goodTagList!=null">
                                <label>商品标签</label>{{filterTags(item.goodTagList)}}
                            </li>
                        </ul>
                    </div>
                    <i v-if="item.price!='0'">¥{{item.price|formatNumber}}元</i>
                    <i v-else>
                        <span>意向采购价格</span>面议</i>
                </div>

                <div class="center-page" v-if="page.totals>0">
                    <mypager :total="page.totals" :rows="page.rows" :current="page.page" @change="change"></mypager>
                </div>
            </div>
            <div class="list-side">
                <h3>热门商品推荐</h3>
                <div class="side-box" v-for="(item,index) in recommendGoods" :key="index">
                    <nuxt-link class="side-img" :to="{path:'/goods',query:{id:item.goodsId}}">
                        <img v-if="!item.hasOwnProperty('logoUrl')" src="~/assets/images/no-img.png" />
                        <img v-else :src="absUrl(item.logoUrl[0])">
                    </nuxt-link>
                    <div class="side-price">
                        <span v-if="item.payMode==1">
                            面议
                        </span>
                        <span v-else>
                            ¥ {{item.price|formatNumber}}元
                        </span>
                    </div>
                    <nuxt-link :to="{path:'/goods',query:{id:item.goodsId}}">
                        <a class="side-title">{{item.name}}</a>
                    </nuxt-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import portal from "~/net/portal"
import mypager from '~/components/Mypager'
import simplePager from '~/components/SimplePager'
import { searchCodes } from "~/constant/SearchCodes"
import { absUrl } from '~/utils/tool'

export default {
    name: "shopGoods",
    data() {
        return {
            selectOrder: 0,
            showPriceArray: false,
            showPublishTimeArray: false,
            codes: searchCodes,
            shopId: 0,
            recommendGoods: [],
            searchList: [],
            page: {
                totals: 0,
                page: 1,
                row: 10,
                keyWord: '',
                shopId: 0,
                order: 'desc',//升降序（desc/asc)
                sort: 'publishTime'//(price,hits,publishTime)
            },
            searchTip: '',
            absUrl
        };
    },
    components: {
        mypager,
        simplePager
    },
    created() {
        this.page.keyWord = this.$route.query.keyword;
        this.page.shopId = this.$route.query.id;
        this.shopId = this.$route.query.id;
        // this.getShopById();
        this.getShopPageListOrderByHot();
        this.getGoodsPageListByShopId();
    },
    asyncData(context) {
        return portal.getShopDetailsById({
            query: { shopId: context.query["id"] },
            client: context.req
        }).then((res) => {
            return {
                shop: res.data,
            }
        }).catch(e => {
            return { shop: "" }
        })
    },
    methods: {
        filterTags(tags) {
            if (tags != null)
                if (tags.length > 3) {
                    return tags.slice(0, 3).join(' ');
                } else {
                    return tags.join(' ');
                }
            else return "";
        },
        // absUrl(value) {
        //     return absUrl(value)
        // },
        goToShop() {
            this.$router.push({
                path: "/shop",
                query: {
                    id: this.shopId
                }
            })
        },
        getShopById() {
            portal.getShopDetailsById({
                query: { shopId: this.shopId }
            }).then((res) => {
                let { code, data, message } = res;
                if (code === '0000') {
                    this.shop = data;
                } else {
                    this.$Message.error(message);
                }
            });
        },
        searchSite() {
            this.$router.push({
                path: "/search",
                query: {
                    keyword: this.page.keyWord,
                    code: ""
                }
            });
        },
        filterChildType(childType) {
            if (childType == undefined)
                return ''
            if (childType.startsWith("01")) {
                return this.codes[1].childs.find(_ => _.code == childType).name;
            } else if (childType.startsWith("02")) {
                return this.codes[2].childs.find(_ => _.code == childType).name;
            } else return "";
        },
        gethighTechFields(highTechs) {
            if (typeof (highTechs) == 'undefined') {
                return ''
            }
            highTechs = highTechs.split(',')
            if (highTechs.length <= 2)
                return highTechs.join(' ')
            else
                return highTechs.slice(0, 1).join(' ')
        },
        getShopPageListOrderByHot() {
            portal.getShopPageListOrderByHot({
                query: {
                    shopId: this.shopId,
                    num: 5,
                    order: 'desc',
                    sort: 'publishTime'
                }
            }).then((res) => {
                let { code, data, message } = res;
                if (code === '0000') {
                    this.recommendGoods = data;
                } else {
                    this.$Message.error(message);
                }
            });
        },
        getGoodsPageListByShopId() {
            this.searchTip = this.page.keyWord;
            portal.getGoodsPageListByShopId({
                query: this.page
            }).then((res) => {
                let { code, data, message } = res;
                if (code === '0000') {
                    this.searchList = data.rows;
                    this.page.totals = data.total;
                } else {
                    this.$Message.error(message);
                }
            });
        },
        change(page) {
            this.page.page = page;
            this.getGoodsPageListByShopId();
        },
        orderBy(orderBy, orderSeq, index) {
            if (orderBy == "price") {
                this.showPriceArray = !this.showPriceArray;
                this.showPublishTimeArray = false;
            } else if (orderBy == "publishTime") {
                this.showPriceArray = false
                this.showPublishTimeArray = !this.showPublishTimeArray;
            } else {
                this.showPriceArray = false;
                this.showPublishTimeArray = false;
            }
            this.selectOrder = index;
            this.page.page = 1;
            this.page.order = orderSeq;
            this.page.sort = orderBy
            this.getGoodsPageListByShopId();
        },
    }
}
</script>

<style>
@import "~/assets/styles/shop.css";
@import "~/assets/styles/search.css";
</style>
